<template>
  <div>
    <nav-bar class="home-nav">
      <div slot="left" class="left">
        <a href="#"><img src="~assets/img/netease.png" alt=""></a>
      </div>
      <div slot="center" class="center" >
        <div class="turn"><i class="iconfont icon-prev" @click="back()"></i></div>
        <div class="turn"><i class="iconfont icon-prev" @click="forward()"></i></div>
        
        <div class="input"><i class="iconfont icon-sousuo"></i><input type="text"></div>
        <div class="turn mircrophone"><i class="iconfont icon-maikefeng"></i></div>
      </div>
      
      <div slot="right" class="right">
        <el-popover
          placement="top"
          ref="popover"
          title="标题"
          width="250"
          trigger="click"
          >
          <div class="profile" >
            <div class="profileTop"  style="height:70px">
              <!-- <div style="display:flex;justify-content:space-evenly;"> -->
              <div style="font-size:18px;font-weight:600;color:#000;margin:0 -6px" v-if="profile">
                <span>{{profile.eventCount}}</span>
                <span>{{profile.follows}}</span>
                <span>{{profile.followeds}}</span>
              </div>
              <div><span>动态</span><span>关注</span><span>粉丝</span></div>
              <!-- </div> -->
            </div>
            <div class="profileItem" style="height:35px" @click="OpenLevel">
              <i class="iconfont icon-dengji" style="padding-left:25px;font-size:20px"></i>
              <span style="padding-left:7px;font-size:13.5px">等级</span>
              <span style="position:absolute;right:20px"  v-if="profile">Lv.{{profile.level ? profile.level : 1}} </span>
            </div>
            <div class="profileItem" style="height:35px" @click="editProfile">
              <i class="iconfont icon-gerenxinxi" style="padding-left:25px;font-size:20px"></i>
              <span style="padding-left:7px;font-size:13.5px">个人信息设置</span>
              <i class="iconfont iconfont icon-prev" style="font-size:15px;position:absolute;right:20px"></i>
            </div>
            <div class="profileItem" style="height:45px;display:flex;justify-content:center" @click="exit">
              <i class="iconfont icon-guanbi" style="font-size:20px"></i>
              <span style="padding-left:7px;font-size:13.5px">退出登录</span>
            </div>
          </div>
        </el-popover>
        <!-- <div v-else></div> -->
        <span class="leftspan" v-show="!isLogin">
          <span @click="toLogin">
            <img :src="circleUrl" class="avatar"></img>
            <a>未登录</a> 
            <i class="iconfont icon-htmal5icon03"></i>
          </span>
          <span><a>开通vip</a></span>
        </span>
        <span class="leftspan" v-show="isLogin">
          <span>
            <img :src="circleUrl" @click="GoProfile" class="avatar"></img>
            <span v-popover:popover>
              <span v-if="profile" style="margin:0">{{profile.nickname | simString}}</span></span> 
            <i class="iconfont icon-htmal5icon03"></i>
          </span>
          <span><a>开通vip</a></span>
        </span>
        <span><i class="iconfont icon-clothes"></i></span>
        <span><i class="iconfont icon-shezhi"></i></span>
        <span><i class="iconfont icon-youxiang"></i></span>
        <span style="font-weight:100">|</span>
        <span v-show="!isFullScreen"><i class="iconfont icon-quanping" @click="FullScreen"></i></span>
        <span v-show="isFullScreen"><i class="iconfont icon-quxiaoquanping" @click="ExitFullscreen"></i></span>
        <span @click="ScreenRefresh"><i class="iconfont icon-shuaxin"></i></span>
        <span @click="ScreenClose"><i class="iconfont icon-guanbi1"></i></span>
        <span></span>
        <span></span>
      </div>
    </nav-bar>
    <div v-if="showLogin">
      <login :show.sync="showLogin" @Close="closeLogin"></login>
    </div>
  </div>
</template>

<script>
import navBar from 'components/common/navbar/NavBar'
import Login from 'components/content/login/Login'
import {request} from 'network/request'
import {simString} from 'common/filter'

import {mapState} from 'vuex'

export default {
  name:'appNavbar',
  components: {
    navBar,
    Login,
  },
  data () {
    return {
      showLogin:false,
      isFullScreen:false,
    }
  },
  computed:{
    ...mapState({
      profile:state => state.profile.profile,
      isLogin:'login',
      circleUrl(state){
        return state.profile.profile ?
               state.profile.profile.avatarUrl :
               "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      }
    })
  },
  methods:{
    back(){
      this.$router.go(-1)
    },
    forward(){
      this.$router.go(1)
    },
    FullScreen(){
      var de = document.documentElement;
      if (de.requestFullscreen){
          de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }else{
        return
      }
      this.isFullScreen = true
    },
    ExitFullscreen(){
      var de = document;
      if (de.exitFullscreen) {
          de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
      this.isFullScreen = false
    },
    ScreenClose(){
      window.location.href="about:blank";
    },
    ScreenRefresh(){
      location.reload()
    },
    toLogin(){
      this.showLogin = true
    },
    closeLogin(){
      this.showLogin = false
    },
    OpenLevel(){
      // const data = await request('GET','user/level')
      // console.log(data)
      window.open('https://music.163.com/#/user/level')
    },
    async exit(){
      const data = await request('GET','logout')
      if(data.code === 200){
        localStorage.removeItem("cookie")
        location.reload()
      }
    },
    editProfile(){
      this.$router.push('/editprofile')
    },
    GoProfile(){
      this.$router.push('/profile/'+this.profile.userId)
    }
  },
  async created(){
    let cookie = localStorage.getItem('cookie')
    if(cookie && cookie!='undefined'){
      this.$store.commit('Login')
      const data = await request('GET','user/account')
      const data2 = await request('GET','user/detail',{uid:data.account.id})
      // console.log(data2)
      this.$store.commit('ChangeProfile',data2)
    }
  },
  mounted(){
    // setTimeout(()=>{
    //   this.circleUrl = this.$store.state.profile.profile
    // },500)
      // console.log('__________')
      // console.log(this.islogin)
      // console.log(this.$store.state.profile.profile)
      // this.circleUrl = this.$store.state.profile.profile
    
  },
  filters:{
    simString
  }
}
</script>

<style scoped>
.home-nav{
  position: relative;
  z-index: 11;
}
.left img{
    width: 200;
    height: 58px;
  }
  .center{
    padding-left: 14px;
    height: 100%;
    display: flex;
    align-items: center;
    
  }
  .center .turn{
    cursor:pointer;
    margin: 0 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgb(217,59,59);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    color:rgb(242,186,186)
  }
  .center .mircrophone{
    height: 30px;
    width: 30px;
    font-size: 17px;
  }
  .center input{
    outline: none;
    border: 0;
    border-radius: 30px;
    background-color: rgb(225,62,62);
    width: 124px;
    height: 30px;
    margin-left: 8px;
    padding-left: 30px;
    caret-color:#fff;
  }
  .center .icon-prev{
    font-size:5px;
  }
  .center .turn:first-child .icon-prev{
    position: relative;
    left: -1px;
    transform: rotateZ(180deg);
  }
  .icon-sousuo{
    font-size: 19px;
  }
  .icon-htmal5icon03{
    font-size: 12px;
  }
  .input{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
  }
  .input i{
    position: absolute;
    left: 15px;
    color: rgb(242,186,186);
  }
  .right span{
    cursor:pointer;
    margin: 0 10px; 
    color:rgb(242,186,186);
  }
  .leftspan span{
    font-size: 10px;
    margin: 0 5px;
    color: rgb(251,217,217);
  }
  .avatar{
    height: 24px;
    width: 24px;
    padding-right: 5px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .right span:hover{
    color:#fff
  }
  .el-avatar{
    position: relative;
    transform: translateY(30%);
  }
  /* .profile{ */
    /* height: 400px; */
  /* } */
  .profileTop{
    padding-top: 30px;
    height:100px;
    border-bottom: 1px solid rgb(237,237,237);
    font-size: 12px;
    color: rgb(102,102,102);
  }
  .profileTop div{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .profileTop span{
    cursor: pointer;
  }
  .profileItem{
    /* height: 200px; */
    cursor:pointer;
    width: 100%;
    position: relative;
    border-bottom: 1px solid rgb(237,237,237);
    display:flex;
    /* justify-content:space-evenly; */
    align-items: center;
    color: rgb(51,51,51);
  }
  .profileItem:hover{
    background-color:rgb(240,241,242);
  }
  .profileItem div{
    margin: 20px 0;
  }
  /* .profile div{
    
  } */
</style>